<!--
@license
Copyright 2021 The TensorFlow Authors. All Rights Reserved.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<div class="regex-edit-dialog" (focusout)="handleFocusOut()">
  <h1 mat-dialog-title>Color runs by regex</h1>

  <mat-dialog-content>
    <p>Enter a regex with capturing groups to match against run names:</p>
    <mat-form-field>
      <mat-label>Regex type</mat-label>
      <mat-select
        [value]="regexTypeFn(selectedGroupBy)"
        (selectionChange)="regexTypeChange($event)"
      >
        <mat-option value="{{ REGEX_BY_RUN_STR }}">Run Name</mat-option>
        <mat-option
          *ngIf="enableColorByExperiment"
          value="{{ REGEX_BY_EXP_STR }}"
          >Experiment Name</mat-option
        >
      </mat-select>
    </mat-form-field>
    <mat-form-field>
      <input
        matInput
        #regexStringInput
        value="{{ regexString }}"
        (keydown.enter)="onEnter()"
        (input)="regexInputChange($event.target.value)"
        i18n-aria-label="Color Runs by Regex Query"
        aria-label="Color Runs by Regex Query"
        cdkFocusInitial
      />
    </mat-form-field>
  </mat-dialog-content>

  <div class="example-details">
    <p>
      Each matching run will be assigned a color based on the "key" formed by
      its matches to the capturing groups. <br />
      <button (click)="fillExample('(train|eval)')">
        Try <code>(train|eval)</code>
      </button>
      to assign all runs containing <code>train</code> to one color and all runs
      containing <code>eval</code> to another color.
    </p>
  </div>

  <div class="group-container" *ngIf="regexString">
    <h4>Color group preview</h4>
    <div class="grouping-preview">
      <div *ngIf="colorRunPairList.length; else empty" class="match-container">
        <ul
          class="group"
          *ngFor="let colorRunsPair of colorRunPairList"
          [ngStyle]="{borderColor: colorRunsPair.color}"
        >
          <li>
            <label
              ><span
                class="color-swatch"
                [ngStyle]="{backgroundColor: colorRunsPair.color}"
              ></span
              ><code class="group-id" [title]="colorRunsPair.groupId"
                >{{colorRunsPair.groupId}}</code
              ></label
            >
            <ul>
              <ng-container *ngFor="let run of colorRunsPair.runs | slice:0:5;">
                <li [title]="run.name">{{ run.name }}</li>
              </ng-container>
              <li class="more" *ngIf="colorRunsPair.runs.length > 5">
                <em>and {{colorRunsPair.runs.length - 5 | number}} more</em>
              </li>
              <li class="no-match" *ngIf="colorRunsPair.runs.length === 0">
                <em>No runs are in the group</em>
              </li>
            </ul>
          </li>
        </ul>
      </div>

      <ng-template #empty>
        <div class="warning">
          There are no runs matching the regex, <code>/{{regexString}}/</code>.
          Please check if your regex string is correct.
        </div>
      </ng-template>
    </div>
  </div>

  <div mat-dialog-actions align="end">
    <button mat-button mat-dialog-close>Cancel</button>
    <button
      class="save-button"
      mat-raised-button
      color="primary"
      mat-dialog-close
      (click)="onSaveClick()"
    >
      Save
    </button>
  </div>
</div>
